<!DOCTYPE html>
<!--[if lt IE 8]>
<html class="no-js lt-ie9 lt-ie8">
	<![endif]-->
<!--[if IE 8]>
	<html class="no-js lt-ie9">
		<![endif]-->
<!--[if gt IE 8]>
		<!-->
<html class="no-js">
    <!--
			<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>Particulate Medusae</title>
        <meta name="description" content="Soft body jellyfish simulation. Built with Particulate.js and Three.js">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="shortcut icon" href="./static/img/favicon.ico">
        <link rel="stylesheet" href="./static/css/style.css" />
    </head>
    <body>
        <article id="info" class="modal info-modal">
            <h1>Medusae</h1>
            <div class="info-section">
                <dl>
                    <dt>Concept, Design & Code</dt>
                    <dd>
                        <a href="http://jayweeks.com">Jay Weeks</a>
                    </dd>
                </dl>
                <dl>
                    <dt>Audio Design</dt>
                    <dd>JP Arsenault </a>
                    </dd>
                </dl>
            </div>
            <div class="info-section">
                <dl>
                    <dt>Physics</dt>
                    <dd>
                        <a href="http://particulatejs.org">Particulate</a>
                    </dd>
                </dl>
                <dl>
                    <dt>Graphics</dt>
                    <dd>
                        <a href="http://threejs.org">Three</a>
                    </dd>
                </dl>
            </div>
            <div class="info-section">
                <dl>
                    <dt>Source</dt>
                    <dd>
                        <a href="http://github.com/jpweeks/particulate-medusae">Github</a>
                    </dd>
                </dl>
                <dl>
                    <dt>Process</dt>
                    <dd>
                        <a href="https://www.flickr.com/photos/jpweeks/sets/72157646887502644/">Flickr</a>
                    </dd>
                </dl>
            </div>
        </article>
        <div id="cover-info" class="modal-cover"></div>
        <div id="container-controls" style="visibility: hidden">
            <div id="toggle-info" class="controls-button">
                <div class="label">About</div>
            </div>
            <div id="toggle-dots" class="controls-button">
                <div class="label">Particles</div>
            </div>
            <div id="menu-colors" class="controls-menu"></div>
            <div id="toggle-colors" class="controls-button">
                <div class="label">Colors</div>
            </div>
            <div id="toggle-audio" class="controls-button">
                <div class="label">Audio</div>
            </div>
            <div id="toggle-postfx" class="controls-button">
                <div class="label">Post FX</div>
            </div>
            <div id="toggle-sim" class="controls-button">
                <div class="label">Run Sim</div>
            </div>
        </div>
        <div id="container-stats" class="stats-panel">
            <div id="container-graphs"></div>
            <dl>
                <dt>Particles</dt>
                <dd id="particle-count"></dd>
            </dl>
            <dl>
                <dt>Constraints</dt>
                <dd id="constraint-count"></dd>
            </dl>
            <dl>
                <dt>Forces</dt>
                <dd id="force-count"></dd>
            </dl>
        </div>
        <div id="container"></div>
        <script src="./static/js/three.min.js"></script>
        <script src="./static/js/app.min.js"></script>
        <script>
            App.STATIC_URL = "./static/";
        </script>
    </body>
</html>